<template>
  <div class="home-wrapper">
    <el-skeleton style="display: flex;flex-flow: row wrap;width: 100%;height: 100%;overflow-y: hidden" loading animated
                 v-if="loading">
      <template #template>
        <el-skeleton-item variant="rect" class="item" style="width: 250px;height: 306px;margin: 15px 12px;"
                          v-for="_item of 30" :key="_item" />
      </template>
    </el-skeleton>
    <el-scrollbar class="home-container" v-else-if="!loading && dataSource.length >= 0">
      <div class="item-wrapper" v-for="(item,i) of dataSource" :key="i" v-loading="item.loading">
        <div class="item" @click="toSubjectPage(item)">
          <el-image class="img-content" :src="item.subjectImg" fit="cover" />
          <div class="item__content">
            <h3 class="item__title" :title="item.subjectName">{{ item.subjectName }}</h3>
            <p class="item__type"><span
              style="font-weight: 600;">{{ locale === "EN" ? "K" : "" }}{{ getCurrentGrade(item.gradeId) }}</span>
              {{ $t("grade.grade") }}</p>
            <p class="item__type"><span style="font-weight: 600">{{ item.subjectTypeSize || 0 }}</span>
              {{ $t("home.home_item_line1") }}</p>
            <p class="item__total"><span style="font-weight: 600">{{ item.questionSize || 0 }}</span>
              {{ $t("home.home_item_line2") }}</p>
            <p class="item__description"><span style="font-weight: 600">{{ item.answersNum || 0 }}</span>
              {{ $t("home.home_item_line3") }}</p>
          </div>
        </div>
        <div class="context-btn" @click.stop>
          <ContextMenu @select="onContextSelect($event, item)" />
        </div>
      </div>
      <div class="item-wrapper">
        <div class="item-add-last" @click="onAddTopic">
          <img src="@/assets/add.webp" type="image/png" class="item-add-last--icon" alt="add" />
          <span class="item-add-last--text">
          {{ $t("home.home_item_line4") }}
        </span>
        </div>
      </div>
    </el-scrollbar>

  </div>
  <classification-component :current-grade="headerInputStore?.inputData?.grade" :visible="showTopicEdit"
                            @close="onClose" :data="activeItem" />
  <el-empty description="empty" class="empty" image-size="120" v-if="!loading && dataSource.length < 1"></el-empty>
  <popup-component v-model:modal-value="showConfirm">
    <div class="confirm-wrapper">
         <span class="confirm-tip">
         <el-icon style="font-size: 20px;transform: translateY(3px);margin-right: 3px"><Warning /></el-icon>
           {{ $t("home.tips") }}
         </span>
      <span class="confirm-title">{{ $t("home.beforeDeleted") }}?</span>
      <el-space style="display: flex;margin-top: 30px;margin-left: 8px">
        <el-button class="buttons-primary" type="primary" style="width: 90px" @click="()=>onDelete()">
          {{ $t("home.confirm") }}
        </el-button>
        <el-button class="buttons-default" @click="showConfirm = false" style="width: 90px;margin-right: 0">
          {{ $t("home.cancel") }}
        </el-button>
      </el-space>
    </div>
  </popup-component>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, watch } from "vue";
import type { TopicOverview } from "@/interface/TopicOverview";
import ContextMenu from "@cs/Context-Menu/Context-Menu.vue";
import { useRouter } from "vue-router";
import { MENU_TYPE } from "@cs/Context-Menu/ENUM";
import ClassificationComponent from "@cs/Classification/Classification-Component.vue";
import { fetchTopicCopy, fetchTopicDelete, fetchTopicList } from "@/http/topic";
import { useHeaderInputStore } from "@/stores/headerInput";
import { useUserInfoStore } from "@/stores/user";

import { useDebounce } from "@/libs/useDebounce";

import type { Http } from "@/interface/Http";
import { useI18n } from "vue-i18n";

import PopupComponent from "@cs/Popup/Popup-Component.vue";
import { Warning } from "@element-plus/icons-vue";


const showConfirm = ref(false);
const headerInputStore = useHeaderInputStore();
const userInfoStore = useUserInfoStore();
const dataSource = ref<(TopicOverview & { loading: boolean })[]>([]);
const router = useRouter();
const gradeList = ref(userInfoStore.userInfo?.grade);
const showTopicEdit = ref(false);
const loading = ref(false);
const { locale } = useI18n();
let activeItem = ref<TopicOverview | undefined>();
const toSubjectPage = (item: TopicOverview) => {
  router.push({
    name: "subject-page",
    query: {
      id: item.id,
      title: item.subjectName || "--"
    }
  });
};
const onCopy = () => {
  const index = dataSource.value.findIndex(it => it.id === activeItem.value?.id);
  if (index > -1) {
    dataSource.value[index].loading = true;
  }
  fetchTopicCopy({
    subjectId: activeItem.value?.id
  }).then((res: Http.Response<TopicOverview>) => {
    if (res.code === 200) {
      dataSource.value.push({
        ...res.data,
        loading: false
      });
    }
  }).finally(() => {
    index > -1 && (dataSource.value[index].loading = false);
  });
};
const onConfirmDelete = () => {
  showConfirm.value = true;

};
const getCurrentGrade = (id: number) => gradeList.value.find(it => it.id === id)?.gradeName;
const onContextSelect = (type: number, item: TopicOverview) => {
  activeItem.value = item;
  switch (type) {
    case MENU_TYPE.EDIT:
      showTopicEdit.value = true;
      break;
    case MENU_TYPE.COPY:
      onCopy();
      break;
    case MENU_TYPE.DELETE:
      onConfirmDelete();
      break;
  }
};
const fetchData = () => {
  loading.value = true;
  fetchTopicList({
    userId: userInfoStore?.userInfo?.user?.id,
    gradeId: headerInputStore?.inputData?.grade || undefined,
    subjectName: headerInputStore?.inputData?.subjectName
  }).then((res: Http.Response<TopicOverview[]>) => {
    if (res?.data) {
      dataSource.value = res.data.map(it => {
        return {
          ...it,
          loading: false
        };
      });
    }
  }).finally(() => {
    loading.value = false;
  });
};
const onDelete = () => {
  showConfirm.value = false;
  const index = dataSource.value.findIndex(it => it.id === activeItem.value?.id);
  if (index > -1) {
    dataSource.value[index].loading = true;
  }

  fetchTopicDelete({
    subjectId: activeItem.value?.id
  }).then((res: Http.Response<undefined>) => {
    if (res.code === 200) {
      if (index > -1) {
        dataSource.value.splice(index, 1);
      }
    }
  }).catch(() => {
    if (index > -1) {
      dataSource.value[index].loading = false;
    }
  });
};
const onClose = (refresh: boolean) => {
  if (!refresh) {

    activeItem.value = undefined;
  }
  if (refresh) {
    fetchData();
  }
  showTopicEdit.value = false;
};
const onCloseConfirm = () => {
  showConfirm.value = false;
};
const onAddTopic = () => {
  activeItem.value = undefined;
  showTopicEdit.value = true;
};
onBeforeMount(() => {
  fetchData();
});
const debounce = useDebounce(fetchData, 600);
watch(() => headerInputStore.inputData, cb => {
  if (cb) {
    debounce();
  }
}, {
  deep: true
});
</script>

<style scoped lang="scss">
@import "@/theme.scss";

.home-wrapper {
  overflow-y: auto;
  background-color: transparent;
  height: calc(100vh - $header-bar-height);
  position: relative;

  .home-container {
    display: flex;
    flex-flow: row wrap;
    min-width: 300px;
    position: relative;
    :deep(.el-scrollbar__wrap){
      width: 100%;
      box-sizing: border-box;
    }
  }
}

.item-add-last--icon {
  margin: 0 auto;
  max-width: 50%;
  position: absolute;
  left: 25%;
  top: 50px;
}

.item-add-last--text {
  width: 100%;
  text-align: center;
  top: 180px;
  position: absolute;
}

.item-wrapper,
.item-wrapper-add {
  box-sizing: border-box;
  border-radius: 10px;
  width: 240px;
  margin: 15px 12px;
  min-height: 309px;
  position: relative;
  transition: all 0.2s ease-in-out;
  box-shadow: 14px 14px 30px 0px #BDC3D3;
  display: inline-block;
  overflow-y: hidden;

  &:hover {
    // box-shadow: $main-box-shadow2;
    cursor: pointer;
  }

  .item-add-last {
    height: 100%;

    position: absolute;
    width: 240px;
    box-sizing: border-box;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    box-shadow: 14px 14px 30px 0px #BDC3D3;
    z-index: 1;
  }

  .item {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 10px;
    overflow: hidden;
    min-height: 256px;

    .img-content {
      width: 240px;
      height: calc(240px * 3 / 4);
      overflow: hidden;
    }

    p,
    h3 {
      margin-block-end: 0;
      margin-block-start: 0;
      font-size: smaller;
    }

    p {
      color: #43536c;
      font-size: 14px;
    }

    h3 {
      font-size: larger;
      padding: 0;
    }
  }
}

.item-add {

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.item__content {
  padding: 10px 15px;
  border-top: 1px solid #efefef;
  font-size: 16px;

  .item__description {
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.item-wrapper-add {

  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;

  img {
    width: 40%;
    transition: width 0.2s ease-in-out;
    object-fit: cover;

    &:not(:last-of-type):hover {
      width: 72%;
    }
  }

  p {
    font-size: smaller;
    font-weight: 600;
  }
}

.context-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.item__title {
  color: #43536C;
  width: 210px;
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty {
  position: fixed;
  top: 30%;
  left: 50%;
}

.confirm-wrapper {
  width: 330px;
  height: 160px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: relative;

  .confirm-tip {
    position: absolute;
    left: 20px;
    top: 10px;
    font-size: 16px;
    font-weight: 600;
  }

  .confirm-title {
    font-weight: normal;
    padding: 30px 0 0 0;
    font-size: 16px;
  }
}
</style>
